<template>
  <div class="main">
    <h4>{{ title }}</h4>
    <slot></slot>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
} from '@vue/composition-api'



export default defineComponent({
  name: 'titleBox',
  props: ['title'],
  setup(_, { slots }) {
    const state = reactive({
      dialogVisible: false
    })

    return {
      state,
      slots
    }
  }
})
</script>
<style lang="scss" scoped>
.main {
  padding: 0 10px;
  height: 40px;
  display: flex;
  align-items: center;
  text-indent: 18px;
  justify-content: space-between;
  position: relative;

  h4 {
    font-size: 15px;
    color: #2c3e50;
  }

  &::before {
    content: '';
    left: 10px;
    position: absolute;
    display: block;
    width: 5px;
    height: 24px;
    background: #409EFF;
  }
}
</style>